<template>
	<view>
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in pays" :key="index" class="nav-item" :class="{current: index === tabCurrentIndex}" :id="'tab'+index"
			 @click="changeTab(index)">{{item.title}}</view>
		</scroll-view>
		<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
			<swiper-item v-for="(tabItem,index) in pays" :key="index">
				<scroll-view class="panel-scroll-box" :scroll-y="true">
					<image :src="tabItem.wechat" mode="widthFix"></image>
					<image :src="tabItem.alipay" mode="widthFix"></image>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import sun from '@/utils/sun.js';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		data() {
			return {
				// pays:['上海红丝集团收款码','上海誉思集团收款码',"苏州誉思收款码",'苏州红丝收款码','上海红祥收款码','曼格纳收款码','广州红丝收款码','广州雅置收款码','上海爱尔凯收款码','上海硕蕾收款码','上海红丝创意策划收款码','上海蓬拓收款码'],
				// pays:['上海红丝集团收款码','上海誉思集团收款码',"苏州誉思收款码",'苏州红丝收款码','上海红祥收款码','曼格纳收款码','广州红丝收款码','广州雅置收款码','上海爱尔凯收款码','上海硕蕾收款码','上海红丝创意策划收款码','上海蓬拓收款码'],
				pays: [{
						id: 0,
						title: '上海红丝集团收款码',
						imgSrc: ['../../../static/hongsipay/hongsiAlipay.jpg', '../../../static/hongsipay/hongsiWeChat.jpg']
					},
					{
						id: 1,
						title: '上海誉思集团收款码',
						imgSrc: ['../../../static/yusipay/yusiAlipay.jpg', '../../../static/yusipay/yusiWeChat.jpg'], //上海誉思
					},
					{
						id: 2,
						title: '苏州誉思收款码',
						imgSrc: ['../../../static/pay/suzhouYuAlipay.jpg', '../../../static/pay/suzhouyusi.png'], //苏州誉思
					},
					{
						id: 3,
						title: '苏州红丝收款码',
						imgSrc: ['../../../static/pay/suzhouhongAlipay.jpg', '../../../static/pay/suzhouhongsi.png'], //苏州红丝
					},
					{
						id: 4,
						title: '上海红祥收款码',
						imgSrc: ['../../../static/pay/hongxiangAlipay.jpg', '../../../static/pay/shanghaihongxiang.png'], //上海红祥
					},
					{
						id: 5,
						title: '曼格纳收款码',
						imgSrc: ['../../../static/pay/mangena.jpg']
					},
					{
						id: 6,
						title: '广州红丝收款码',
						imgSrc: ['../../../static/pay/guangzhouHongAlipay.jpg', '../../../static/pay/guangzhouHongWechat.png'], //广州红丝
					},
					{
						id: 7,
						title: '广州雅置收款码',
						imgSrc: ['../../../static/pay/guangzhouYazhi.jpg'], //广州雅置
					},
					{
						id: 8,
						title: '上海爱尔凯收款码',
						imgSrc: ['../../../static/pay/aierkaiAlipay.jpg', '../../../static/pay/aierkaiWechat.png'], //上海爱尔凯
					},
					{
						id: 9,
						title: '上海硕蕾收款码',
						imgSrc: ['../../../static/pay/shuoleiAlipay.jpg', '../../../static/pay/shuoleiWechat.png'], //上海硕蕾
					},
					{
						id: 10,
						title: '上海红丝创意策划收款码',
						imgSrc: ['../../../static/pay/chaungyiAlipay.jpg', '../../../static/pay/chaungyiWechat.png'], //上海红丝创意
					},
					{
						id: 11,
						title: '上海蓬拓收款码',
						imgSrc: ['../../../static/pay/pengtuoAlipay.jpg', '../../../static/pay/pengtuoWechat.png'],
					},
					{
						id: 12,
						title: '上海曼芯餐饮管理有限公司',
						imgSrc: ['../../../static/pay/manxinAlipay.jpg'],
					},
					{
						id: 13,
						title: '曼格纳艺术中心南桥店',
						imgSrc: ['../../../static/pay/mangenananqiaoAlipay.jpg', '../../../static/pay/mangenananqiaoWechat.jpg'],
					},
					{
						id: 14,
						title: '曼格纳（上海）文化传播有限公司',
						imgSrc: ['../../../static/pay/mangenaWenhuaAlipay.jpg', '../../../static/pay/mangenaWenhuaWechat.jpg'],
					},
					{
						id: 15,
						title: '上海红丝礼仪策划（集团）宁波分公司',
						imgSrc: ['../../../static/pay/ningbo_Alipay.jpg', '../../../static/pay/ningbo_Wechat.jpg'],
					},

					{
						id: 16,
						title: '曼格纳艺术中心宝山店',
						imgSrc: ['../../../static/pay/mangena_baoshanAlipay.jpg', '../../../static/pay/mangena_baoshanWechat.png'],
					},
					{
						id: 17,
						title: '曼格纳艺术中心祝桥店',
						imgSrc: ['../../../static/pay/mangena_zhuqiaoAlipay.jpg', '../../../static/pay/mangena_zhuqiaoWechat.jpg'],
					},
					{
						id: 18,
						title: '南京硕蕾酒店管理有限公司',
						imgSrc: ['../../../static/pay/nanjing_shuoleiAlipay.jpg', '../../../static/pay/nanjing_shuoleiWechat.png'],
					},

				],
				scrollLeft: 0, //顶部选项卡左滑距离
				tabCurrentIndex: 0, //当前选项卡索引
				longClick: 0,
				timeOutEvent: 0,
			};
		},
		onLoad(options) {
			windowWidth = uni.getSystemInfoSync().windowWidth;
			// 获取列表信息
			this.getTableData()
		},
		methods: {
			// 获取列表信息
			getTableData() {
				let that = this
				sun.request({
					url: "/api/dictionary.company/index",
					showLoading: true,
					token: true,
					data: {
						is_valid: 1
					},
					success(res) {
						if (res.code == 200) {
							that.pays = res.data.list
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 3000
							})
						}
					}
				})
			},


			//获取图片信息
			// getPicInfo(item){
			// 	var that=this;				
			// 	 uni.getImageInfo({
			// 	            src: item,
			// 	            success: function (image) {								
			// 			        // #ifdef H5
			// 			         that.start(image.path);  //仅在H5平台出现
			// 			        // #endif

			// 					// #ifdef APP-PLUS	
			// 						// console.log(image.path)	
			// 					that.savePic(image.path); //app下载图片
			// 					// #endif								
			// 	            },
			// 				fail(e) {
			// 					console.log(e)
			// 				}
			// 	        });
			// },
			//  // 长按
			// start(path) {
			// 	// console.log(path,'0000');
			// 	var that = this;
			// 	this.longClick = 0;
			// 	this.timeOutEvent = setTimeout(function() {
			// 	that.longClick = 1;
			// 	uni.showModal({
			// 	    title: '提示',
			// 	    content: '确定要下载图片吗？',
			// 	    success: function (res) {
			// 	        if (res.confirm) {
			// 	            console.log('用户点击确定');
			// 				that.downImg(path)
			// 	        } else if (res.cancel) {
			// 	            console.log('用户点击取消');
			// 	        }
			// 	    }
			// 	});
			//   }, 1000);
			// },
			// // 下载
			// downImg(path) {
			// 	// console.log(path);
			// 	var that=this;
			// 	uni.downloadFile({
			// 		    url: path,
			// 		    success: (res) => {
			// 		        if (res.statusCode === 200) {
			// 					// console.log(res.tempFilePath);
			// 					that.saveImg(res.tempFilePath)
			// 				}
			// 			}
			// 		});
			//    	},
			// saveImg: function(url){
			// 	console.log(url);
			// 	var oA = document.createElement("a");
			// 	oA.download = '';// 设置下载的文件名，默认是'下载'
			// 	oA.href = url;
			// 	document.body.appendChild(oA);
			// 	oA.click();
			// 	oA.remove(); // 下载之后把创建的元素删除
			// },
			// //app下载图片
			// savePic(path){				
			// 	var that=this;
			// 	this.timeOutEvent = setTimeout(function() {
			// 			that.longClick = 1;
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: '确定要下载图片吗？',
			// 				success: function (res) {
			// 					if (res.confirm) {
			// 						uni.saveImageToPhotosAlbum({
			// 							   filePath: path,
			// 							   success: function () {
			// 								   console.log('save success');
			// 								   uni.showToast({
			// 								   	   icon:'none',
			// 									   title:"保存成功"
			// 								   })
			// 							   },
			// 								fail:function(e) {
			// 									console.log(e)
			// 								}
			// 						  });
			// 					} else if (res.cancel) {
			// 						console.log('用户点击取消');
			// 					}
			// 				}
			// 			});
			// 	}, 1000);

			// },
			//tab切换
			async changeTab(e) {
				// console.log(e)
				let index = null
				if (e.detail) {
					this.tabCurrentIndex = e.detail.current;
					index = e.detail.current;
				} else {
					this.tabCurrentIndex = e;
					index = e;
				}


				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					this.tabCurrentIndex = index;
				}, 300)
			},
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		}
	}
</script>

<style lang="less">
	uni-page-body {
		// padding-top: 50px;
	}

	page {
		padding-top: 0;
	}

	/* 顶部tabbar */
	.nav-bar {
		position: fixed;
		left: 0;
		// top: 90upx;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;
		padding-top: 20upx;
		box-sizing: border-box;
		padding-left: 20upx;

		.nav-item {
			display: inline-block;
			// width: 150upx;
			padding: 5upx 20upx;
			// height: 41upx;
			text-align: center;
			// line-height: 40upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #FFFFFF;
			background: rgba(64, 108, 235, 1);
			border-radius: 21upx;

			&:after {
				width: 50%;
			}
		}
	}

	.content {
		width: 100%;
		padding-top: 90upx;
	}

	.content .hongsi {
		width: 100%;
		height: 100%;
	}

	.content .hongsi image {
		width: 100vw;
		display: block;
	}

	.content .yusi image {
		width: 100vw;
		display: block;
	}

	.content .pay image {
		width: 100vw;
		display: block;
	}



	.swiper-box {
		padding-top: 80upx;
		width: 100%;
		height: 100vh;

	}

	.panel-scroll-box {
		width: 100vw;
		height: 100%;
		text-align: center;
	}
</style>
